<template>
  <div id="aside">
    <div :class="{cate:true,nightBg:isNight}">
      <p><span class="iconfont icon-biaoqian"></span>博客分类:</p>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="transparent"
        :text-color="isNight?'#ccc':'#000'"
        active-text-color="#6CA6CD"
        router>
        <el-menu-item 
          :index="'/home/blog?msg=type&id='+item.id" 
          v-for="item in classes" 
          :key="item.id">
          <span class="iconfont icon-fenlei"></span>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <div :class="{tags:true,nightBg:isNight}">
      <p><span class="iconfont icon-biaoqian"></span>博客标签:</p>
      <div class="box">
        <el-tag v-for="item in tags" 
          :key = "item.id" 
          :type="types[getRandom()]" 
          :style="styles[getRandom()]"
          @click="handleTag(item.id)">
            {{item.name}}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        isNight:false,
        types:["","success","info","warning","danger"],
        // styles:[{"font-size":"0.8rem","height":"30px","line-height":"20px"},
        //   {"font-size":"0.9rem","height":"40px","line-height":"30px"},
        //   {"font-size":"1rem","height":"50px","line-height":"40px"},
        //   {"font-size":"1.1rem","height":"60px","line-height":"50px"},
        //   {"font-size":"1.2rem","height":"70px","line-height":"60px"}],
        styles:[{"font-size":"0.8rem"},
          {"font-size":"0.9rem"},
          {"font-size":"1rem"},
          {"font-size":"1.1rem"},
          {"font-size":"1.2rem"}
        ],
        classes:[],
        tags:[]
      }
    },
    created(){
      //判断当前时间
      let hour = new Date().getHours()
      if(hour > 6 && hour < 18){
        this.isNight = false
      }else{
        this.isNight = true
      }
      this.getClasses()
      this.getTags()
    },
    methods:{
      //获取随机值
      getRandom(){
        return Math.floor(Math.random()*5); 
      },
      //获取分类
      async getClasses(){
        const {data:res} = await this.$http.get("/blog/type/list")
        this.classes = res.data
      },
      //获取标签
      async getTags(){
        const {data:res} = await this.$http.get("/blog/tag/list")
        this.tags = res.data
      },
      //点击标签进行跳转
      handleTag(id){
        this.$router.push({path:'/home/blog',query:{id:id,msg:'tag'}})
      }

    }
  }
</script>

<style scoped>
  .nightBg{
    background-color: #292929 !important;
    box-shadow: 0px 0px 0px #000 !important;
  }
  .icon-fenlei{
    font-size:1.4rem;
    margin-right:15px;
  }
  .el-menu{
    border-right:none;
  }
  .el-menu-item:hover{
    background-color:rgba(0,0,0,.1) !important;
    border-radius:5px;
  }
  .cate{
    width:250px;
    /* height:280px; */
    margin-left:15px;
    padding-top:25px;
    padding-bottom:25px;
    background-color: white;
    /* box-shadow: 0px 0px 10px #ccc; */
  }
  .tags{
    width:250px;
    margin-left:15px;
    padding-top:25px;
    padding-bottom:25px;
    background-color: white;
    /* box-shadow: 0px 0px 10px #ccc; */
    margin-top:25px;
  }
  .cate p,.tags p{
    margin-left:15px;
    display:inline-block;
    width:100px;
    border-bottom:2px solid #7fb442;
    text-align:center;
    font-size:1rem;
    font-weight:bold;
    padding-bottom:8px;
  }
  .tags p span{
    margin-right:8px;
  }
  .cate p span{
    margin-right:8px;
  }
  .tags .el-tag{
    margin-left:8px;
    margin-top:8px;
    cursor:pointer;
  }
</style>